#if(null != article)
<script src="${theme_url('/static/js/OwO.min.js')}"></script>
<div id="${article.cid ?! 0}" class="comment-container">
<div id="comments" class="comments-area">
        #if(article.allowComment)

        #set( comments = comments(3) )

        #if(!is_empty(comments))
        <ol class="comment-list">
            #for(comment : comments(3).rows)
            <li id="comment-${comment.coid}" class="comment even thread-even depth-1 parent">
                <div id="div-comment-${comment.coid}" class="comment-body">    
                    <div class="comment-author vcard">
                        <img class="avatar avatar photo" src="${gravatar(comment.mail)}?s=32&r=G&d=" title="${comment.author}" width="50" height="50"></img>
                            <cite class="fn">
                                    <a class="url" href="${comment.url}" rel="external nofollow" target="_blank" >${comment.author}</a>
									#if(comment.authorId == 1) <label class="comment-siteauthor">作者</label> #end
                            </cite>
                    </div>
                    <div class="comment-meta commentmetadata"> 
                            <a href="${permalink()}#comments-${comment.coid}">${fmtdate(comment.created, 'yyyy年MM月dd日 HH:mm')}</a>
                    </div>
					<div class="comment-content">
                       <p>${article(comment.content)}</p>
					</div>
                    <div class="reply">
                        <a class="comment-reply-link" rel="nofollow" onclick="TaleComment.reply('${comment.coid}');">回复</a>
                    </div>
                </div>
                #if(comment.levels > 0)
                <ol class="children">
                        #for(child : comment.children)
                        <li id="comment-${child.coid}" class="comment odd alt depth-2">
                            <div id="div-comment-${child.coid}" class="comment-body">
                                    <div class="comment-author vcard">
                                        <img class="avatar" src="${gravatar(child.mail)}?s=32&r=G&d=" title="${child.author}" width="50" height="50"></img>
                                        <cite class="fn">${child.author}</cite>
										#if(child.authorId == 1) <label class="comment-siteauthor">作者</label> #end
                                    </div>
                                    <div class="comment-meta commentmetadata"> 
                                        <a href="${permalink()}#comments-${child.coid}">${fmtdate(comment.created, 'yyyy年MM月dd日 HH:mm')}</a>
                                    </div>
									<div class="comment-content">
                                    <p>${article(child.content)}</p>
									</div>
                                    <div class="reply">
                                        <a class="comment-reply-link" rel="nofollow" onclick="TaleComment.reply('${child.coid}');">回复</a>
                                    </div>
                            </div>
                        </li>
                    #end
                </ol>
                #end
            </li>
            #end
        </ol>        
        #end 							
					<div id="comments-nav">
					#if(comments.hasPrevPage)
						<a class="prev page-numbers" href="?cp=${comments.prevPage}#comments">上一页</a>
						#end
						#for(navIndex : comments.navPageNums)
						<a #if(comments.pageNum== navIndex) class="page-numbers current" #end href="?cp=${navIndex}#comments">${navIndex}</a></span>
						#end
						#if(comments.hasNextPage)
						<a class="next page-numbers" href="?cp=${comments.nextPage}#comments">下一页</a>
						#end
					</div>

        <div id="respond" class="comment-respond">
		<h4 id="reply-title" class="comment-reply-title">发表评论</h4>
		<p class="comment-notes"><span id="email-notes">电子邮件地址不会被公开。</span> 必填项已用<span class="required">*</span>标注</p>
        <span class="response">#if(null!=login_user) 登录身份: <a href="${login_user.homeUrl}">${login_user.username}</a><a href="/logout" title="Logout">退出&raquo;</a> #end</p> 
        <form method="post" id="comment-form" class="comment-form" onsubmit="return TaleComment.subComment();">
            <input type="hidden" name="coid" id="coid"/>
            <input type="hidden" name="cid" id="cid" value="${article.cid}"/>
            <input type="hidden" name="csrf_token" value="${csrf_token}"/>
			<div class="comment form-group has-feedback">
			<div class="input-group">
            <textarea rows="6" cols="120%" name="content" id="comment" class="textarea form-control" placeholder="来都来了,不随便说两句吗?" required minlength="5" maxlength="2000"></textarea>
			</div>
			<div class="OwO"></div>
            </div>
             <div class="comment-form-author form-group has-feedback"><div class="input-group"><div class="input-group-addon"><i class="fa fa-user"></i></div>
            <input name="author" maxlength="12" id="author" class="text form-control" placeholder="昵称" value="${login_user.username ?! ''}" required/>
            <span class="form-control-feedback required">*</span></div></div>           
             <div class="comment-form-email form-group has-feedback"><div class="input-group"><div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
            <input type="email" name="mail" id="mail" class="text form-control" placeholder="邮箱" value="${login_user.email ?! ''}" required/>
            <span class="form-control-feedback required">*</span></div></div>           
            <div class="comment-form-url form-group has-feedback"><div class="input-group"><div class="input-group-addon"><i class="fa fa-link"></i></div>
            <input type="url" name="url" id="url" class="text form-control" placeholder="网站" value="${login_user.homeUrl ?! ''}"/>
           </div>
           </div>
			<p>
			${_csrf_token_input}
           <button type="submit" class="btn btn-primary" id="submit">提交评论</button>
			</p>
        </form>
		</div>
        #end
        
    </div>
</div>
#end

<script type="text/javascript">
    (function () {
        window.TaleComment = {
            reply: function (coid) {
                $('#comment-form input[name=coid]').val(coid);
                $("html,body").animate({scrollTop: $('div.input-group').offset().top}, 1500);
                $('#comment-form #textarea').focus();
            },
            subComment: function () {
                $.ajax({
                    type: 'post',
                    url: '/comment',
                    data: $('#comment-form').serialize(),
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        $('#comment-form input[name=coid]').val('');
                        if (result && result.success) {
                            window.location.reload();
                        } else {
                            if (result.msg) {
                                alert(result.msg);
                                window.location.reload();
                            }
                        }
                    }
                });
                return false;
            }
        };
    })();

    function getCommentCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(decodeURI(arr[2]));
        else
            return null;
    }

    function addCommentInputValue() {
        document.getElementById('author').value = getCommentCookie('tale_remember_author');
        document.getElementById('mail').value = getCommentCookie('tale_remember_mail');
        document.getElementById('url').value = getCommentCookie('tale_remember_url');
    }

    addCommentInputValue();

</script>